// Name:                     Image
//
// Description:              Defines styles for img
//
// Component:                `.am-img`
//
// Modifiers:                `.am-img-thumbnail`
//                           `.am-img-responsive`
//
// =============================================================================

/* ==========================================================================
   Component: Image
 ============================================================================ */


/* Image thumbnails */

.@{ns}img-thumbnail {
    // Keep them at most 100% wide
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: @img-thumbnail-padding;
    line-height: @line-height-base;
    background-color: @img-thumbnail-bg;
    border: 1px solid @img-thumbnail-bd-color;
    border-radius: @img-thumbnail-bd-radius;
    transition: all .2s ease-in-out;
    &.@{ns}radius {
        border-radius: @radius-normal;
    }
    .hook-img-thumbnail;
}

.@{ns}img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
    .hook-img-responsive;
}

// Hooks
// =============================================================================
.hook-img-thumbnail() {}

.hook-img-responsive() {}
